/**
 * Created by bjh on 2017/11/10.
 *
 */
import GM from "g2-mobile";
import React, { Component } from "react";
import autobind from "autobind-decorator";

import "./index.less";
//components
import SmartStack from "./smartStack.jsx";
import SmartStackDIV from "./smartStackDIV.jsx";

const MARGIN_DEFAULT = [20, 20, 20, 20];
class SmartStackWS extends Component {
    constructor(props, context) {
        super(props);
        this.state = {
            width: document.body.clientWidth
        }
    }

    componentDidMount(){
        if (this.ss.constructor.name === "SmartStack") {
            this._chart = this.ss.getChart();
            this.getCanvas();
        }
    }

    calculateWidth() {
        let { chartData, margin = MARGIN_DEFAULT } = this.props;
        let width = document.body.clientWidth;
        let colWidth = 0;
        if (chartData instanceof Array) {
            width = width / 6 * chartData.length;
        }
        colWidth = (width - margin[1] - margin[3]) / chartData.length;
        return {
            width,
            colWidth,
        }
    }

    getPoint(canvas, x, y) {  
		let bbox = canvas.getBoundingClientRect();
		this.width = bbox.width;
		this.height = bbox.height;
		return {  
			x: x - bbox.left,   
			y: y - bbox.top 
		};  
	} 

	getCanvas(){  
		// console.log(this._chart)
		let canvas = document.getElementById(this._chart._attrs.id);  
		//处理点击事件显示tooltips
		canvas.onclick = (event) => {  
			let point = this.getPoint(canvas, event.clientX, event.clientY)  
			let x = parseInt(point.x);  
			let y = parseInt(point.y);  
			// 根据画布坐标获取对应数据集
			let data = this._chart.getSnapRecords(point);
			console.log("data: ",data);
		}  
    }

    @autobind
    handleClick(yData) {
        console.log(yData);
        this.setState({
            active: yData
        })
    }
    
    render() {
        let {
            chartData,
            margin = MARGIN_DEFAULT,
            color = "#3296FA",
            useTooltip = false,
            height = 400,
        } = this.props;

        let data = chartData || [
            { "yAxisData": 10, "xAxisData": "tokyo", "name": "tokyo" },
            { "yAxisData": 4, "xAxisData": "newYork", "name": "newYork" },
            { "yAxisData": 3, "xAxisData": "berlin", "name": "berlin" }
        ];
        // data.sort((i, j)=>{ return j.yAxisData - i.yAxisData })
        let { width, colWidth } = this.calculateWidth();

        return (
            <div style={{ width: document.body.clientWidth }} className="scroll-contrainer">
                <div style={{ width: width, marginLeft: margin[3], marginRight: margin[1]}} className="title">
                    {
                        data.map((item, index) => {
                            return (
                                <div className={`title-item${this.state.active === item.xAxisData ? ' active': ''}`} style={{ width: colWidth }}>
                                    <span className="title-item-nums">
                                        {item.yAxisData}人
                                    </span>
                                    <span className="title-item-text">
                                        {item.xAxisData}
                                    </span>
                                </div>
                            )
                        })
                    }
                </div>
                <SmartStackDIV
                    ref={(el) => this.ss = el}
                    margin={margin}
                    width={width}
                    colWidth={colWidth}
                    height={height}
                    chartData={data}
                    useTooltip={useTooltip}
                    showLine={true}
                    handleClick={this.handleClick}
                    activeItem={this.state.active}
                />
                {/* <SmartStack
                    ref={(el) => this.ss = el}
                    margin={margin}
                    width={width}
                    colWidth={colWidth}
                    height={height}
                    chartData={data}
                    useTooltip={useTooltip}
                    showLine={true}
                /> */}
            </div>
        )
    }
}

export default SmartStackWS